<?php echo $this->doctype(); ?>

<head>

<?php
echo $this->headTitle("Back End Menu");
echo "<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>";
echo $this->headLink()
	->appendStylesheet($this->url. 'public' . '/css/humanity/jquery-ui-1.8.17.custom.css')
	->appendStylesheet($this->url. 'public' . '/js/themes/base/demos.css');
echo $this->headScript()
	->appendFile($this->url. 'public' . '/js/jquery-1.6.2.js')
	->appendFile($this->url. 'public' . '/js/jquery.ui.position.js')
	->appendFile($this->url. 'public' . '/js/jquery.ui.core.js')
	->appendFile($this->url. 'public' . '/js/jquery.ui.widget.js')
	->appendFile($this->url. 'public' . '/js/jquery.ui.mouse.js')
	->appendFile($this->url. 'public' . '/js/jquery.ui.button.js')
	->appendFile($this->url. 'public' . '/js/jquery.ui.tabs.js')
	->appendFile($this->url. 'public' . '/js/jquery.ui.dialog.js')
	->appendFile($this->url. 'public' . '/js/jquery.editinplace.js')
	->appendFile($this->url. 'public' . '/js/jquery-ui-1.8.11.custom.min.js')
	->appendFile($this->url. 'public' . '/js/jquery.ui.nestedSortable.js')
	->appendFile($this->url. 'public' . '/js/jquery.json.min.js')
	->appendFile($this->url. 'public' . '/js/jquery.ui.accordion.js')
	
	->appendFile($this->url. 'public' . '/js/jquery.effects.blind.js')
	->appendFile($this->url. 'public' . '/js/jquery.effects.core.js')
	->appendFile($this->url. 'public' . '/js/jquery.effects.explode.js');	
	//$base      = $this->baseUrl($this->url);	

?>	
	<style>
	#dialog label, #dialog input { display:block; }
	#dialog label { margin-top: 0.5em; }
	#dialog input, #dialog textarea { width: 95%; }
	#tabs li .ui-icon-close { float: left; cursor: pointer; }
	#add_tab { cursor: pointer; }
	
	.nav-menu-frame { width: 280px;  }
	.portlet { margin: 0 1em 1em 0; }
	.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	
	li
		{
		margin:0px 0px 0px 5px;
		padding:0px;
		list-style-type:none;
		text-align:left;
		font-family:Arial,Helvetica,sans-serif;
		font-size:13px;
		font-weight:normal;
		}
	
	
	.placeholder  { border: 1px dashed BlueViolet; visibility: visible !important; height: 25px !important; background-color: #f5f5f5;}
	.ui-nestedSortable-error { visibility: hidden; }

	a.deleteAction:link {color: blue; text-decoration: none; }
	a.deleteAction:visited {color: purple; text-decoration: none; }
	a.deleteAction:hover {color: orange; text-decoration: underline; }
	a.deleteAction:active {color: red; }
	
	li.item_add a:link {color: purple; text-decoration: none; }
	li.item_add a:visited {color: purple; text-decoration: none; }
	li.item_add a:active {color: red; }
	
	</style>
<head/>	

	
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<div id="dialog_addlink" title="Add Link">
	<p>You have just add link into Menu</p>
</div>
<div id="dialog_save" title="Save">
	<p>Save finished!</p>
</div>

<table cellspacing="0" cellpadding="0" class="layout-grid">
<tbody>
<tr>
<td>
<div class="nav-menu-frame"  >

	<div id="add-custom-link" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="width:280px;display:block;margin-left:300px;">
		<div class="portlet-header ui-widget-header ui-corner-all">  Pages Links <span class='ui-icon ui-icon-minusthick'></span></div>
		<div class="portlet-content">
			<p> <label for="name" > Label </label> <input id="name" class="ui-corner-all" style="float:right;margin:-2px;width:200px" type="text" name="txtName" /> </p>
			<p> <label for="link" > URL</label> <input id="link" class="ui-corner-all" style="float:right;margin:-2px;width:200px" type="text" name="txtURL" value="http://"/> </p>
			
			<div style="clear:both;float:right"> <input  id="add_item" type="button"  value="add to Menu" /> </div>
		</div>
		
	</div>
</div></td>
</tr>
<tr>
<td>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist" style="margin-left:300px; width:600px;">
	
	
	<h3 class="ui-accordion-header ui-helper-reset ui-state-default  " role="tab" aria-expanded="false" aria-selected="false" tabindex="0"><a href="#">View Article</a></h3>
	
		<div class="t_a_bottom ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="height:400px;display: block;">
			<ul class="t_a_ui_list">
				<?php 
					$newsBLO= new Model_NewsBLO();
					$articles = $newsBLO->getAll();
					foreach($articles as $row){
						echo "<li class='item_add' style='height:24px;'><a href='/news/article/view/id/{$row['article_id']}' onclick='return false;' > {$row['title']} </a><hr></li>";
					}
				
				?>
			</ul>
		
		</div>
	<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1"><a href="#">View Category</a></h3>
	<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 125px; display: none; " role="tabpanel">
		<?php 
			$categoryBLO = new Model_CategoryBLO();
			$items = $categoryBLO->getTree();
			for ($i = 0; $i < count($items); $i++):
		?>	
			<li class='item_add' style='height:24px;'>
				<a href=<?php echo "/category/index/view/id/".$items[$i]['category_id'];?> onclick='return false;' style="margin-left: <?php echo 30*$items[$i]['depth'];?>px;"><?php echo $items[$i]['name'];?> </a>
				<hr></hr>
			</li>
		<?php endfor?>
		
	</div>
</div>
</td>
</tr>
<tr>
<td>	
<div class='Tab' >
	<button id=addMenu_tab class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Add Menu</span></button>
	<button id=save  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Save Menu</span></button>
	
	<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" >
		<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
			<?php foreach ($this->menus as $menu) {echo $menu['htmlMenu'];} ?>
			
		</ul>
		<?php foreach ($this->menus as $menu) {
				echo $menu['htmlItems'];
			} 
		?>
		
	</div>
	<button id=save style="margin-left:150px;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Save Menu</span></button>
</div><!-- End demo -->
</td>
</tr>

</tbody>
</table>
<script type="text/javascript">
	$(function() {
		
		var $content_tab_selected;
		var tab_counter = 2;
		var tab_selected = 0;
		var name,link;
		// tabs init with a custom tab template and an "add" callback filling in the content
		var $tabs = $("#tabs").tabs({
			tabTemplate: "<li class='ui-state-default ui-corner-top '><a href='#{href}' class='editable'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
			panelTemplate: "<ul></ul>" ,
			show: function(event, ui) {
				$content_tab_selected = $( ui.panel );
				
			},
			add: function( event, ui ) {
				$content_tab_selected = $( ui.panel );
				
				//var tab_content = $tab_content_input.val() || "This is content of Tab" + tab_counter;
				//$( ui.panel ).append( "<p>" + tab_content + "</p>" );
				
			},
			select: function(event, ui) {
             	$content_tab_selected = $( ui.panel );
				tab_selected = ui.index;
         	}		
		});

		
		// actual addTab function: adds new tab using the title input from the form portlet below
		function addTab() {
			tab_counter = $("#tabs").tabs("length");
			var tab_title =  "Menu " + tab_counter;
			$tabs.tabs( "add", "#tabs-" + tab_counter, tab_title, tab_counter);
			
			//var index = $("#tabs").tabs("length") - 1;
			$tabs.tabs("select", tab_counter);
			tab_counter++;
		}

		// addTab button
		$( "#addMenu_tab" )
			.button()
			.click(function() {
				addTab();
				$('.editable').editInPlace({
					callback: function(unused, enteredText) { 
						return enteredText; 
					},
					bg_over: null
				});
			});
		//get id of panel inside tab through index
		function getIdforIndex(searchIndex){                                                                                             
			var existingIndex = $tabs.tabs('option','selected');                                                                   
            $tabs.tabs("select",searchIndex);
            var myId = $("li.ui-state-active a").attr("href");;                                             
            $tabs.tabs("select", existingIndex);                                                                                 
            return myId; 
         } 
		function saveMenu(){
			var n = $("#tabs").tabs("length");
			var menus = new Array();
			var items = new Array("a","c");
			for (i=0; i<n; i++){
				var id = getIdforIndex(i);
				items = $(id).nestedSortable('toArray');
				//add linkitem,labelitem,nameMenu
				if (items.length>1) {
					items[0]['name'] = $('a[href='+ id +']').text();
					$(id).find('div').each(function(i) {
						items[i+1]['label'] = $(this).find('span:first span.editable').text();
						items[i+1]['link'] = $(this).find('span:last ').text();
					});
					menus[i] = items;
				}
			}	
			$.post("./add", 'menus='+ $.toJSON(menus),function(data) {
				$( "#dialog_save" ).dialog( "open" );} );	
			
		}
		
		// save button
		$( "#save" )
			.button()
			.click(function() {
				saveMenu();
			});

		// close icon: removing the tab on click
		// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
		$( "#tabs span.ui-icon-close" ).live( "click", function() {
			var index = $( "li", $tabs ).index( $( this ).parent() );
			$tabs.tabs( "remove", index );
		});
		
			
		
		//Place which related to Items
			//add nav
			
		

		$( ".portlet-header .ui-icon" ).click(function() {
			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			$( this ).parents( ".portlet" ).find( ".portlet-content" ).toggle();
		});
		
		addEventItem();
		//function add Eventitem
		function addEventItem(){
				//event click of Deletion
			$(".deleteAction").click(function() {
				
				$(this).parents("li:first").remove();
				
				$('#' + $content_tab_selected.context.id ).nestedSortable('refresh');
			});
				//event hover item
			$('div .item').hover(function() {
				$(this).find('a.deleteAction').show();
				$( this ).toggleClass( "ui-state-hover" );
			}, function() {
				$(this).find('a.deleteAction').hide();
				$( this ).toggleClass( "ui-state-hover" );
			});
				//add event edit label and url
			$('.editable').editInPlace({
				callback: function(unused, enteredText) { 
					return enteredText; 
				},
				bg_over: null
			});
			
			var n = $("#tabs").tabs("length");
			for (i=0; i<n; i++){
					var id = getIdforIndex(i);
					//add event sort
				$(id ).nestedSortable({
					nested: 'ul',
					forcePlaceholderSize: true,
					handle: 'div',
					helper:	'clone',
					items: 'li',
					listType: 'ul',
					maxLevels: 3,
					opacity: .6,
					placeholder: 'placeholder',
					revert: 250,
					tabSize: 25,
					tolerance: 'pointer',
					toleranceElement: '> div'
				
				});
			}
			
			
		}
		function getMaxRowId () {
			var maxRowId = 0;
			$('#' + $content_tab_selected.context.id).find('li').each(function() {
				var rowId = parseInt($(this).attr('id').split('-')[3]);
				if (maxRowId < rowId) {
					maxRowId = rowId;
				}
			});
			return maxRowId;
		}
		
			//function add item
		function addItem(){
			var label_item = name || 'name',
				link_item = link || 'http://';
			
			//add content item into panel of tab.
			var id = $content_tab_selected.context.id + '-item-' + (getMaxRowId()+1);
			//var html = "<li>" + $('<div>').append( $('#item').clone().attr('id',id) ).remove().html() + "</li>";
			//$content_tab_selected.append( html );
			
			//tomato
			var deleteLink = $('<a/>').attr('href', 'javascript: void(0);')
							.addClass('deleteAction')
							.html('Xoa');
			$(deleteLink).hide().click(function() {
				$('#'+id).remove();
				$('#' + $content_tab_selected.context.id ).nestedSortable('refresh');
			});

			var labelcell = $('<span/>')//.css('width','360px')
				.append($('<span/>').addClass('editable').css('cursor', 'move').css('padding-right', '20px').html(label_item ))
				.append($(deleteLink));
			
			var item = $('<div/>').append($(labelcell)).css('height','25px').addClass('item');	

			$(item).hover(function(){
				$(this).find('a.deleteAction').show();
				$(this).toggleClass("ui-state-hover");
			}, function(){
				$(this).find('a.deleteAction').hide();
				$(this).toggleClass("ui-state-hover");				
			});
			
			$(item).append( $('<span/>').append( $('<span/>').addClass('editable').html(link_item ).css('padding-left', '0px') ).css({'float':'right','width':'400px'}) ).append('<hr/>');
			$('<li/>').attr('id',id).append($(item)).appendTo($content_tab_selected);
			
			/**
			 * Make the label and link editable
			 */
			$('div').find('.editable').editInPlace({
				callback: function(unused, enteredText) { 
					return enteredText; 
				},
				bg_over: null
			});
			//tomato
			
			//add event click.
			
			//add event sort
			$('#' + $content_tab_selected.context.id ).nestedSortable({
				nested: 'ul',
				forcePlaceholderSize: true,
				handle: 'div',
				helper:	'clone',
				items: 'li',
				listType: 'ul',
				maxLevels: 3,
				opacity: .6,
				placeholder: 'placeholder',
				revert: 250,
				tabSize: 25,
				tolerance: 'pointer',
				toleranceElement: '> div'
			
			});
	}
		//Add 1 item custom_link vào Tab Menu
		$("#add_item")
			.button()
			.click(function() {
				name = $( "#name").val() || 'name';
				link = $( "#link" ).val() || 'http://';
				addItem();
		});

		$( "#dialog_addlink" ).dialog({
			autoOpen: false,
			show: "blind",
			hide: "explode",
			height:"80"
		});
		$( "#dialog_save" ).dialog({
			autoOpen: false,
			show: "blind",
			hide: "explode",
			height:"80"
		});
		//Add 1 item article_link vào Tab Menu
		$('.item_add').click(function() {
				link = $(this).find("a").attr('href');
				name = $(this).find("a").text();
				$( "#dialog_addlink" ).dialog( "open" );
				addItem();
		});
		//Accordion chứa các loại link
		var icons = {
				header: "ui-icon-circle-arrow-e",
				headerSelected: "ui-icon-circle-arrow-s"
					};
		$( "#accordion" ).accordion({
			
			icons: icons,
			collapsible: true, active:false,
			fillSpace: true
		});
		//Sự kiện rê chuột qua item của Accordion
		$('.item_add').hover(function() {
			$( this ).toggleClass( "ui-state-hover" );
		}, function() {
			$( this ).toggleClass( "ui-state-hover" )
		});

		
		

		
			
	});
	
	</script>


